@import '~components/constants.scss';

body,
html {
  margin: 0;
  padding: 0;
  font-family: $main_font;
  color: $black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  background-color: $primary;
}

body,
.disable_selection {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

* {
  -webkit-touch-callout: inherit; /* iOS Safari */
  -webkit-user-select: inherit; /* Safari */
  -khtml-user-select: inherit; /* Konqueror HTML */
  -moz-user-select: inherit; /* Firefox */
  -ms-user-select: inherit; /* Internet Explorer/Edge */
  user-select: inherit; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.allow_selection,
input,
textarea {
  font-family: $main_font;
  -webkit-touch-callout: text; /* iOS Safari */
  -webkit-user-select: text; /* Safari */
  -khtml-user-select: text; /* Konqueror HTML */
  -moz-user-select: text; /* Firefox */
  -ms-user-select: text; /* Internet Explorer/Edge */
  user-select: text; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

body.dragging * {
  cursor: grabbing !important;
}

/** For loaders
**/
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

/**
SCROLLBARS
**/

/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 12px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 12px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
  z-index: 1;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 3px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 3px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.scrollbar-container {
  position: relative;
  height: 100%;
}

/**
TITLE
**/

.title {
  font-size: 32px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: normal;
  margin-bottom: 16px;

  img.emojione {
    width: 32px;
    margin-top: -8px;
  }
}

.subtitle {
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: normal;
  margin-bottom: 8px;
}

.small_title {
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: normal;
  margin-bottom: 6px;
}

.small_subtitle {
  color: $grey_dark;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: normal;
  margin-bottom: 6px;
}

/**
FORMS
**/

.big_form {
  max-width: 600px;
  margin: auto;

  .title,
  .subtitle {
    text-align: center;
  }

  .body {
    margin-top: 56px;
    margin-left: auto;
    margin-right: auto;
    width: 340px;
  }
}

.input_with_label {
  .label {
    margin-bottom: 7px;
    font-weight: 500;
    font-size: 16px;
  }
}

/** Animations **/

.fade_in {
  opacity: 1;
  animation: fade_animation 0.2s;
}
.fade_out {
  pointer-events: none;
  opacity: 0;
  animation: fade_animation 0.2s reverse;
}

.animated-grid.exit-active {
  transform: scale(0);
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.2s;
}
.animated-grid.enter-active {
  transform: scale(0);
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.animated-grid.enter-done {
  transition: all 0.2s;
}

.animated-list.exit-active {
  transform: scaleY(0);
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.2s;
}
.animated-list.enter-active {
  transform: scaleY(0);
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.animated-list.enter-done {
  transition: all 0.2s;
}

.skew_in_left {
  opacity: 1;
  animation: menu_animation_left ease 0.3s;
}
.skew_in_right {
  opacity: 1;
  animation: menu_animation_right ease 0.3s;
}
.skew_in_bottom {
  opacity: 1;
  animation: menu_animation_bottom ease 0.3s;
}
.skew_in_top {
  opacity: 1;
  animation: menu_animation_top ease 0.3s;
}

.skew_in_left_nobounce {
  opacity: 1;
  animation: menu_animation_left_nobounce ease 0.2s;
}
.skew_in_right_nobounce {
  opacity: 1;
  animation: menu_animation_right_nobounce ease 0.2s;
}
.skew_in_bottom_nobounce {
  opacity: 1;
  animation: menu_animation_bottom_nobounce ease 0.2s;
}
.skew_in_top_nobounce {
  opacity: 1;
  animation: menu_animation_top_nobounce ease 0.2s;
}

.scale {
  animation: scale_animation 0.2s linear both;
}
.scale_out {
  -webkit-animation: scale_animation 200ms linear both reverse;
  animation: scale_animation 200ms linear both reverse;
}

@keyframes fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade_animation_reverse {
  100% {
    opacity: 0;
  }
  0% {
    opacity: 1;
  }
}

@keyframes scale_animation {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes menu_animation_left {
  0% {
    -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 10, 0, 0, 1);
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 10, 0, 0, 1);
  }
  2.7% {
    -webkit-transform: matrix3d(
      0.664,
      0.05,
      0,
      0,
      0.067,
      0.664,
      0,
      0,
      0,
      0,
      1,
      0,
      9.34,
      0.709,
      0,
      1
    );
    transform: matrix3d(0.664, 0.05, 0, 0, 0.067, 0.664, 0, 0, 0, 0, 1, 0, 9.34, 0.709, 0, 1);
  }
  2.85% {
    -webkit-transform: matrix3d(
      0.672,
      0.053,
      0,
      0,
      0.07,
      0.672,
      0,
      0,
      0,
      0,
      1,
      0,
      9.259,
      0.724,
      0,
      1
    );
    transform: matrix3d(0.672, 0.053, 0, 0, 0.07, 0.672, 0, 0, 0, 0, 1, 0, 9.259, 0.724, 0, 1);
  }
  3.5% {
    -webkit-transform: matrix3d(
      0.706,
      0.061,
      0,
      0,
      0.081,
      0.706,
      0,
      0,
      0,
      0,
      1,
      0,
      8.87,
      0.763,
      0,
      1
    );
    transform: matrix3d(0.706, 0.061, 0, 0, 0.081, 0.706, 0, 0, 0, 0, 1, 0, 8.87, 0.763, 0, 1);
  }
  5.41% {
    -webkit-transform: matrix3d(
      0.793,
      0.076,
      0,
      0,
      0.101,
      0.793,
      0,
      0,
      0,
      0,
      1,
      0,
      7.484,
      0.715,
      0,
      1
    );
    transform: matrix3d(0.793, 0.076, 0, 0, 0.101, 0.793, 0, 0, 0, 0, 1, 0, 7.484, 0.715, 0, 1);
  }
  5.71% {
    -webkit-transform: matrix3d(
      0.805,
      0.077,
      0,
      0,
      0.103,
      0.805,
      0,
      0,
      0,
      0,
      1,
      0,
      7.245,
      0.693,
      0,
      1
    );
    transform: matrix3d(0.805, 0.077, 0, 0, 0.103, 0.805, 0, 0, 0, 0, 1, 0, 7.245, 0.693, 0, 1);
  }
  6.91% {
    -webkit-transform: matrix3d(
      0.849,
      0.079,
      0,
      0,
      0.106,
      0.849,
      0,
      0,
      0,
      0,
      1,
      0,
      6.273,
      0.587,
      0,
      1
    );
    transform: matrix3d(0.849, 0.079, 0, 0, 0.106, 0.849, 0, 0, 0, 0, 1, 0, 6.273, 0.587, 0, 1);
  }
  8.11% {
    -webkit-transform: matrix3d(
      0.887,
      0.078,
      0,
      0,
      0.105,
      0.887,
      0,
      0,
      0,
      0,
      1,
      0,
      5.311,
      0.469,
      0,
      1
    );
    transform: matrix3d(0.887, 0.078, 0, 0, 0.105, 0.887, 0, 0, 0, 0, 1, 0, 5.311, 0.469, 0, 1);
  }
  10.31% {
    -webkit-transform: matrix3d(
      0.94,
      0.07,
      0,
      0,
      0.094,
      0.94,
      0,
      0,
      0,
      0,
      1,
      0,
      3.691,
      0.276,
      0,
      1
    );
    transform: matrix3d(0.94, 0.07, 0, 0, 0.094, 0.94, 0, 0, 0, 0, 1, 0, 3.691, 0.276, 0, 1);
  }
  10.74% {
    -webkit-transform: matrix3d(
      0.948,
      0.068,
      0,
      0,
      0.091,
      0.948,
      0,
      0,
      0,
      0,
      1,
      0,
      3.409,
      0.245,
      0,
      1
    );
    transform: matrix3d(0.948, 0.068, 0, 0, 0.091, 0.948, 0, 0, 0, 0, 1, 0, 3.409, 0.245, 0, 1);
  }
  13.71% {
    -webkit-transform: matrix3d(
      0.989,
      0.051,
      0,
      0,
      0.068,
      0.989,
      0,
      0,
      0,
      0,
      1,
      0,
      1.764,
      0.091,
      0,
      1
    );
    transform: matrix3d(0.989, 0.051, 0, 0, 0.068, 0.989, 0, 0, 0, 0, 1, 0, 1.764, 0.091, 0, 1);
  }
  15.09% {
    -webkit-transform: matrix3d(
      1.001,
      0.043,
      0,
      0,
      0.057,
      1.001,
      0,
      0,
      0,
      0,
      1,
      0,
      1.198,
      0.052,
      0,
      1
    );
    transform: matrix3d(1.001, 0.043, 0, 0, 0.057, 1.001, 0, 0, 0, 0, 1, 0, 1.198, 0.052, 0, 1);
  }
  16.07% {
    -webkit-transform: matrix3d(
      1.007,
      0.038,
      0,
      0,
      0.05,
      1.007,
      0,
      0,
      0,
      0,
      1,
      0,
      0.865,
      0.033,
      0,
      1
    );
    transform: matrix3d(1.007, 0.038, 0, 0, 0.05, 1.007, 0, 0, 0, 0, 1, 0, 0.865, 0.033, 0, 1);
  }
  20.52% {
    -webkit-transform: matrix3d(
      1.018,
      0.019,
      0,
      0,
      0.025,
      1.018,
      0,
      0,
      0,
      0,
      1,
      0,
      -0.068,
      -0.001,
      0,
      1
    );
    transform: matrix3d(1.018, 0.019, 0, 0, 0.025, 1.018, 0, 0, 0, 0, 1, 0, -0.068, -0.001, 0, 1);
  }
  21.4% {
    -webkit-transform: matrix3d(
      1.018,
      0.016,
      0,
      0,
      0.021,
      1.018,
      0,
      0,
      0,
      0,
      1,
      0,
      -0.165,
      -0.003,
      0,
      1
    );
    transform: matrix3d(1.018, 0.016, 0, 0, 0.021, 1.018, 0, 0, 0, 0, 1, 0, -0.165, -0.003, 0, 1);
  }
  24.47% {
    -webkit-transform: matrix3d(
      1.017,
      0.009,
      0,
      0,
      0.012,
      1.017,
      0,
      0,
      0,
      0,
      1,
      0,
      -0.355,
      -0.003,
      0,
      1
    );
    transform: matrix3d(1.017, 0.009, 0, 0, 0.012, 1.017, 0, 0, 0, 0, 1, 0, -0.355, -0.003, 0, 1);
  }
  27.33% {
    -webkit-transform: matrix3d(
      1.013,
      0.005,
      0,
      0,
      0.006,
      1.013,
      0,
      0,
      0,
      0,
      1,
      0,
      -0.395,
      -0.002,
      0,
      1
    );
    transform: matrix3d(1.013, 0.005, 0, 0, 0.006, 1.013, 0, 0, 0, 0, 1, 0, -0.395, -0.002, 0, 1);
  }
  33.86% {
    -webkit-transform: matrix3d(
      1.005,
      0.001,
      0,
      0,
      0.001,
      1.005,
      0,
      0,
      0,
      0,
      1,
      0,
      -0.288,
      0,
      0,
      1
    );
    transform: matrix3d(1.005, 0.001, 0, 0, 0.001, 1.005, 0, 0, 0, 0, 1, 0, -0.288, 0, 0, 1);
  }
  36.41% {
    -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.228, 0, 0, 1);
    transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.228, 0, 0, 1);
  }
  43.24% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1);
  }
  47.35% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.052, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.052, 0, 0, 1);
  }
  51.43% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.024, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.024, 0, 0, 1);
  }
  67.37% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.003, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.003, 0, 0, 1);
  }
  75% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.002, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.002, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes menu_animation_right {
  0% {
    opacity: 0;
    transform: scale(0.8) translateX(-12%);
  }
  50% {
    transform: scale(1.05) translateX(2.5%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_left {
  0% {
    opacity: 0;
    transform: scale(0.8) translateX(12%);
  }
  50% {
    transform: scale(1.05) translateX(-2.5%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_bottom {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-12%);
  }
  50% {
    transform: scale(1.05) translateY(2.5%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_top {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(12%);
  }
  50% {
    transform: scale(1.05) translateY(-2.5%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_right_nobounce {
  0% {
    opacity: 0;
    transform: scale(0.8) translateX(-12%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_left_nobounce {
  0% {
    opacity: 0;
    transform: scale(0.8) translateX(12%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_bottom_nobounce {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-12%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes menu_animation_top_nobounce {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(12%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0%);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.highlighted_animation {
  animation: highlightedObject 5000ms;
}
@keyframes highlightedObject {
  0%,
  50% {
    background: $yellow;
  }
  100% {
    background: transparent;
  }
}

.full_width {
  width: 100%;
}

.y-margin {
  margin: 16px 0;
}
.x-margin {
  margin: 0 16px;
}
.all-margin {
  margin: 16px;
}
.bottom-margin {
  margin-bottom: 16px;
}
.right-margin {
  margin-right: 16px;
}
.top-margin {
  margin-top: 16px;
}
.left-margin {
  margin-left: 16px;
}

.small-y-margin {
  margin: 8px 0;
}
.small-x-margin {
  margin: 0 8px;
}
.small-all-margin {
  margin: 8px;
}
.small-top-margin {
  margin-top: 8px;
}
.small-bottom-margin {
  margin-bottom: 8px;
}
.small-right-margin {
  margin-right: 8px;
}

.app_title {
  font-size: 16px;
  font-weight: bold;
  color: $black;
  margin-bottom: 8px;
  height: 40px;
  line-height: 40px;
}

.app_subtitle {
  font-size: 14px;
  font-weight: bold;
  color: $grey_dark;
  margin-bottom: 14px;
}

.main_plus_button {
  z-index: 5;
  position: absolute;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding-top: 12px;
  color: $white;
  box-sizing: border-box;
  background: $primary;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  .m-icon-small {
    font-size: 32px !important;
  }
  &:hover {
    background: $primary_hover;
  }
}

.app_back_btn,
.app_right_btn {
  display: inline-block;
  background: $grey_background;
  padding: 4px 8px;
  border-radius: var(--default-border-radius);
  margin-right: 16px;
  font-size: 16px;
  margin-left: -6px;
  line-height: 32px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
  color: var(--black);
  margin-bottom: 8px;
  height: 40px;

  &.app_right_btn {
    margin-right: 0px;
    margin-left: 6px;
  }

  &:hover {
    background: $grey_light;
  }
}

.mediumPopupComponent .separator {
  width: calc(100% + 32px);
  height: 16px;
  margin: 0 -16px;
  margin-top: 16px;
  border-top: 1px solid $grey_background;
}

@media screen and (max-width: 640px) {
  .nomobile {
    display: none !important;
  }
}

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
